<template>
  <!-- #ifdef MP-WEIXIN -->
  <modal 
    :show="visible" 
    :color="color" 
    :width="width" 
    :custom="custom"
    :padding="padding"
    :radius="radius"
    @close="handleClose"
  >
    <slot></slot>
  </modal>
  <!-- #endif -->

  <!-- #ifdef MP-ALIPAY -->
  <view v-if="visible" class="alipay-modal" :style="modalStyle">
    <view class="alipay-modal-mask" @tap="handleClose"></view>
    <view class="alipay-modal-content" :style="contentStyle">
      <slot></slot>
    </view>
  </view>
  <!-- #endif -->
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  color: {
    type: String,
    default: '#FFFFFF'
  },
  width: {
    type: String,
    default: '90%'
  },
  custom: {
    type: Boolean,
    default: true
  },
  padding: {
    type: String,
    default: '0rpx'
  },
  radius: {
    type: String,
    default: '12rpx'
  }
})

const emit = defineEmits(['update:visible', 'close'])

// 支付宝模态框样式
const modalStyle = computed(() => {
  return {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 999
  }
})

const contentStyle = computed(() => {
  return {
    width: props.width,
    padding: props.padding,
    borderRadius: props.radius,
    backgroundColor: '#FFFFFF',
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    zIndex: 1000
  }
})

const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}
</script>

<style lang="scss" scoped>
/* #ifdef MP-ALIPAY */
.alipay-modal {
  &-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
  }

  &-content {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(255, 255, 255, 1.0);
  }
}
/* #endif */
</style> 